<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>交叉轴排列方式</title>
    <!-- 设置标题栏中标题之前的小图标 -->
    <link rel="shortcut icon" href="kfm.jpg" type="image/x-icon">
    <!-- 链接外部样式文件 -->
    <link rel="stylesheet" href="align-self.css">
  </head>
  <body>

    <h3>交叉轴排列方式</h3>

    <section class="first">
        <p>
            flex-flow: row nowrap;
            /
            align-items: flex-start;
        </p>
        <div>
            <span>天</span>
            <span>地</span>
            <span>玄</span>
            <span>黄</span>
        </div>
    </section>

    <section class="second">
        <p>
            flex-flow: column nowrap;
            /
            align-items: flex-start;
        </p>
        <div>
            <span>天</span>
            <span>地</span>
            <span>玄</span>
            <span>黄</span>
            <b>宇</b>
            <b>宙</b>
            <b>洪</b>
            <b>荒</b>
        </div>
    </section>

  </body>
</html>
